<template>
	<!-- 钻石商城  diamondMall-->
	<view class="" style="bac">
		<view class="diamondMall_head flex1 flex-between p20" :style="[{ background: bg_color},{paddingTop:blindBoxheight+'rpx'}]">
			<view class="" style="margin: -15rpx 0 0 0;">
				<u-icon @click=backhomeindex() class="size-40" name="arrow-left"></u-icon>
			</view>
			<view class="size-30 fw ml-60" style="margin: -15rpx 0 0 0;">
				藏金阁
			</view>
			<!-- <view class="size-26 fw" @click="godiamondMall_rule(id)" style="margin: -15rpx 0 0 0;">
				真气规则
			</view> -->
			<view class="size-26 fw" @click="exchangeRecords" style="margin: -15rpx 0 0 0;">
				兑换记录
			</view>
		</view>
		<view class="diamondMall" style="">
			<image class="photo diamondMall_bg" src='../../static/home/jifen_bg.png' mode="">
				<view class="flex1">
					<view class="p20">
						<view class="size-30" style="margin: 180rpx 0 0 0;">
							逍遥真气
						</view>
						<view class="flex1 flex-between">
							<view class="" style="font-size: 80rpx;">
								{{integral}}
							</view>
						</view>
					</view>
					<view class="" style="width: 330rpx;height: 260rpx;margin: 140rpx 0 0 120rpx;">
						<image class="photo" src="../../static/home/jifenshangcheng.png" mode=""></image>
					</view>
				</view>
			</image>
		</view>
		<view class="diamondMall_bottom " style="">
			<view class="   " style="">
				<view class=" flex  " :class="{'st':true,'sticky-fixed':isF}" style="background-color: #FFF;">
					<view class="flex plr-20" style="height: 108rpx;">
						<view style="font-size: 36rpx;"
							:class="['ptb-20','mlr-10','midItem',midIndex==0?'midActive':'']" @click="changeMid(0)">
							{{name1}}
							<view class="line" v-if="midIndex==0"></view>
						</view>
						<view style="font-size: 36rpx;"
							:class="['ptb-20','mlr-10','midItem',midIndex==1?'midActive':'']" @click="changeMid(1)">
							{{name2}}
							<view class="line" v-if="midIndex==1"></view>
						</view>
					</view>
				</view>
				<view class="">

					<view class="">
						<view class="detailBrandside_bottom">
							<view class="detailBrandside" v-for="item in arr" style=""
								@click="handeldiamondMallDetail(item.id)">
								<view class="detailBrandside_box" style="">
									<view class="detailBrandside_box_top" style="">
										<image :src="item.image" class="detailBrandside_image" mode=""></image>
									</view>
									<view class="detailBrandside_bottom_text" style="">
										<image class="detailBrandside_bottom_bg"
											src="../../static/home/detailmengban.png" mode="">
										</image>
										<view class="" style="padding: 20rpx;font-size: 12rpx;height: 200rpx;">
											<view class="size-28 fw" style="text-overflow: ellipsis;overflow: hidden;white-space: nowrap;">
												{{item.name}}
											</view>
											<view class="flex-between flex1 mt-20">
												<view class="flex1" style="">
													<view class="diamondMall_limit">
														限量
													</view>
													<view class="diamondMall_number">
														{{item.stock}}份
													</view>
												</view>
												<view class="flex1" style="">
													<view class="diamondMall_limit">
														剩余
													</view>
													<view class="diamondMall_number">
														{{item.surplus}}份
													</view>
												</view>
											</view>
											<view class="flex1 mt-25 " style="float: right;color: #E2694A;align-item: baseline;">
												<view class="" style="font-size: 40rpx;font-weight: bold;">
													{{item.integral}}
												</view>
												<view class="center ml-10 fw" style="">
												   真气
												</view>
											</view>
										</view>
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {globalData} from "@/App.vue"
	export default {
		components: {},
		data() {
			return {
					blindBoxheight:'',
				id: 1,
				name1: '',
				name2: '',
				arr: [],
				integral: '',
				diamondMallst: [],
				h: '',
				bg_color: '',
				isF: false,
				item: 0,
				isshow: 0,
				poparr: [],
				show: false,
				rowStyle: 2,
				flag: false, //上拉加载
				midIndex: 0,
				query: {
					page: 1,
					pagesize: 10,
					search: "",
					time_order: '',
					price_order: '',
					// goods_id:''
				},
				status: 'more',
				list: [],
				goods_id: [],
				categoryId:''
			}
		},
		onLoad() {
			let _that = this;
			uni.getSystemInfo({
				success(e) {
					console.log(e.statusBarHeight, '123122222222222222222222');
					if (e.platform == "ios" || e.platform == "devtools") {
						_that.blindBoxheight = e.statusBarHeight + 45;
					} else {
						_that.blindBoxheight = e.statusBarHeight + 50;
					}
				}
			})
		},
		onShow() {
			this.init()
			
		},
		onHide() {
			this.midIndex = 0;
			this.flag = false;
			this.status = 'more';
			this.list = [];
			this.query = {
				page: 1,
				pagesize: 10,
				search: "",
				time_order: '',
				price_order: ''
			}
		},
		onPageScroll(e) {
			let h = e.scrollTop
			if (h >= 0) {
				if (h <= 20) {
					this.bg_color = ''
				} else if (20 < h && h <= 200) {
					this.bg_color = '#fff'
				} else if (h > 300) {
					this.bg_color = '#fff'
				}
			}
			// console.log(h);
			// console.log(this.bg_color);
			// console.log(e);
		
		},

		onPullDownRefresh() {
			this.flag = false;
			this.query.page = 1;
			this.list = [];
			this.init();
		},
		methods: {
			init(){
				this.$http('/api/user/userInfo', {
				
					}).then(res => {
						// console.log(res);
						this.integral = res.integral
					}),
					this.$http('api/trade/categoryList', {
						type: 2
					}).then(res => {
						
						this.categoryId=res[0].id
						this.$http('api/goods/goodsList', {
							page: 1,
							pagesize: 10,
							search: "",
							goods_category_id: this.categoryId
						}).then(res => {
							let arr = JSON.parse(JSON.stringify(res.data))
							console.log(arr);
							this.arr = res.data
						})
						console.log(res[0].id);
						this.name1 = res[0].name
						this.name1id = res[0].id
						this.name2 = res[1].name
						this.name2id = res[1].id
						console.log(this.categoryId)
						
					})
					console.log(this.categoryId)
				
			},
			// 积分商城详情页跳转
			handeldiamondMallDetail(id) {
				console.log(id);
				uni.navigateTo({
					url: './integralDetail?id=' + id
				})
			},
			backhomeindex() {
				uni.switchTab({
					url: "./index"
				})
			},
			// 兑换记录
			exchangeRecords() {
				uni.navigateTo({
					url:'./exchangeRecords'
				})
			},
			navigation(item, index, isshows) {
				console.log(item.index);
				this.item = item.index
				if (this.isshow == 0) {
					for (let i = 0; i < this.select_list.length; i++) {
						this.select_list[i].active = false
					}
					item.active = true
				} else if (this.isshow == 1)
					for (let i = 0; i < this.Journalism_list.length; i++) {
						this.Journalism_list[i].active = false
					}
				item.active = true

			},
			// 选择是版权品还是盲盒
			changeMid(index) {
				if (index == 0) {
					this.$http('api/goods/goodsList', {
						page: 1,
						pagesize: 10,
						search: "",
						goods_category_id: this.name1id
					}).then(res => {
						let arr = JSON.parse(JSON.stringify(res.data))
						console.log(arr);
						this.arr = res.data
					})
				} else if (index == 1) {
					this.$http('api/goods/goodsList', {
						page: 1,
						pagesize: 10,
						search: "",
						goods_category_id: this.name2id
					}).then(res => {
						// console.log(JSON.parse(JSON.stringify(res.data)));
						let arr = JSON.parse(JSON.stringify(res.data))
						console.log(arr);
						this.arr = res.data
						// console.log(this.diamondMallst);
					})
				}
				this.isshow = index
				this.midIndex = index;

			},

		}
	}
</script>

<style lang="less" scoped>
	.diamondMall_limit {
		background-color: #F8D3AE;
		width: 60rpx;
		height: 40rpx;
		line-height: 40rpx;
		text-align: center;
		border-radius: 8rpx 0 0 8rpx;
	}

	.diamondMall_number {
		background-color: #FCF6E6;
		// width: 70rpx;
		height: 40rpx;
		color: #DDA23F;
		line-height: 40rpx;
		text-align: center;
		padding: 0 10rpx;
		border-radius: 0 8rpx 8rpx 0;
	}

	.diamondMall_head {
		position: fixed;
		top: 0;
		left: 0;
		z-index: 1000;
		width: 100%;
		height: 100rpx;
		// background-image: linear-gradient(to right, #EDB664, #D9C06C);
	}

	.sticky-fixed {
		/* #ifdef H5 */
		position: sticky;
		top: 88rpx;
		height: 108rpx;
		/* #endif */
		/* #ifndef H5 */
		position: fixed;
		top: 0;
		/* #endif */
		z-index: 999;
	}

	.sticky-fixed1 {
		/* #ifdef H5 */
		position: sticky;
		top: 204rpx;
		height: 120rpx;
		border-bottom: 2rpx solid #DDDDDD;
		z-index: 999;
		background-color: #FFF;
		/* #endif */
		/* #ifndef H5 */
		position: fixed;
		top: 0;
		/* #endif */
		z-index: 999;
		background-color: #FFF;
	}

	.my_diamond_logo {
		width: 45rpx;
		height: 45rpx;
		background-color: rgb(124, 113, 61);
		border-radius: 50%;
		text-align: center;
		line-height: 45rpx;
		font-size: 24rpx;
		color: #EEE06D;
	}

	.questionbox {
		// border: 1rpx solid red;
		width: 240rpx;
		height: 70rpx;
		line-height: 70rpx;
		border-radius: 40rpx;
		background: linear-gradient(90deg, #fff, #000);
		position: fixed;
		bottom: 14%;
		right: 8%;

		.add_question {
			width: 70rpx;
			height: 70rpx;
			border-radius: 50%;
			background-color: #000;

			image {
				// border: 1rpx solid red;
				width: 100%;
				height: 100%;
			}
		}
	}

	.contbox {
		.contentitem {
			border-bottom: 1rpx solid #999;

			.leftbox {
				.text_title {
					font-weight: 600;
				}

				.tipsbox {
					margin-top: 16rpx;
					font-size: 12rpx;

					.tipsborder {
						border: 1rpx solid rgb(108, 126, 205);
						border-radius: 10rpx;
						color: rgb(108, 126, 205);
						background-color: rgb(239, 246, 255);
					}
				}
			}

			.rightbox {
				width: 260rpx;

				image {
					width: 260rpx;
				}
			}

			.contenttit {
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
			}

			.tipsbox {
				margin-top: 16rpx;
				font-size: 12rpx;

				.tipsborder {
					border: 1rpx solid rgb(108, 126, 205);
					border-radius: 10rpx;
					color: rgb(108, 126, 205);
					background-color: rgb(239, 246, 255);
				}
			}
		}
	}

	.searchbox {
		.searchimg {
			width: 60rpx;
			height: 40rpx;
			border-right: 1rpx solid #999;

			image {
				width: 40rpx;
			}
		}

		.selectbox {

			.selectitem,
			.selectitem1 {
				font-size: 16rpx;
				color: #999;
				margin: 0 10rpx;
				border-radius: 40rpx;
				background-color: rgb(246, 246, 246);
				width: 140rpx;
				height: 60rpx;
				text-align: center;
			}

			.selectitem {
				color: #fff;
				background-color: rgb(0, 203, 211);
				width: 140rpx;
				height: 60rpx;
				text-align: center;
			}
		}
	}

	.toptitbox {
		width: 100%;
		border-bottom: 1rpx solid #f6f6f6;
	}

	.rightbox {
		width: 100%;
		position: relative;

		.popcontbox {
			height: 90%;
			position: relative;
			top: 6%;
			padding: 0 20rpx;
			box-sizing: border-box;

			.popitem {
				color: #333;

				.poptit {
					margin: 20rpx 0;
				}

				.popcont {
					display: flex;
					flex-wrap: wrap;

					.contitem,
					.contitem1 {
						border: 1rpx solid rgb(248, 248, 248);
						background-color: rgb(248, 248, 248);
						padding: 10rpx 20rpx;
						margin: 10rpx;
					}

					.contitem1 {
						color: #44ACFF;
						background-color: rgba(#44ACFF, .1);
						position: relative;

						image {
							width: 16rpx;
							height: 16rpx;
							position: absolute;
							top: 0;
							right: 0;
						}
					}
				}
			}
		}

		.popbtn {
			height: 80rpx;
			line-height: 80rpx;
			text-align: center;
			background-color: #44ACFF;
			color: #fff;
			margin: 20rpx;
			border-radius: 40rpx;
		}
	}

	.imagebox {
		position: relative;

		.lockimg {
			position: absolute;
			top: 0;
			width: 80%;
			z-index: 999;
			left: 10%;
		}

		.itemTwoImg {
			width: 330rpx;
			height: 290rpx;
			border-radius: 20rpx;

		}

		.authorinfo {
			width: 100%;
			position: absolute;
			top: 20%;
			z-index: 999;
			text-align: center;

			.authname {
				font-size: 36rpx;
			}
		}

	}

	::v-deep  .u-action {
		color: #fff !important;
	}

	.homeImg {
		width: 284rpx;
		height: 60rpx;
	}

	.collectImg {
		width: 100%;
		height: 690rpx;
	}

	.topIcon {
		width: 50rpx;
		height: 50rpx;
	}

	.homeIcon {
		width: 30rpx;
		height: 30rpx;
	}

	.tipsLeft {
		background: #44ACFF;
		color: #2f2f2e;
	}

	.tipsRight {
		background: rgba(239, 170, 28, .3);
	}

	.userImg {
		width: 40rpx;
		height: 40rpx;
		border-radius: 50%;
	}

	::v-deep  .u-action-active {
		color: #fff;
	}

	.midItem {
		// width: 120rpx;
		height: 68rpx;
		color: #999;
		font-size: 26rpx;
		text-align: center;
	}

	.midActive {
		// border-bottom: 10rpx solid #44ACFF;
		color: #000;
		font-weight: 600;

		.line {
			width: 40%;
			height: 10rpx;
			position: relative;
			top: 9rpx;
			left: 30%;
			background-color: rgb(0, 203, 211);
		}
	}

	.rowImg {
		width: 36rpx;
		height: 36rpx;
	}

	.indexTwoItem {
		width: 330rpx;
		box-shadow: 0px 0px 10rpx 2rpx rgba(92, 95, 239, 0.1);
		border-radius: 10rpx;
		position: relative;
		font-size: 24rpx;
		color: #999;

		.itemTitle {
			font-weight: 550;
			color: #333;
			height: 100rpx;
		}

		.itemTwoImg {
			width: 330rpx;
			height: 290rpx;
			border-radius: 20rpx;
		}

		.itemTips {
			position: absolute;
			left: 0;
			top: 0;
			background: #5C5FEF;
			border-radius: 20rpx 0px 20rpx 0px;
			color: #fff;
			font-size: 22rpx;
			z-index: 10;
		}

		.authTwoImg {
			width: 20rpx;
			height: 20rpx;
		}
	}

	.diamondMall_bottom {
		width: 100%;
		height: 100rpx;
		background-color: #FFF;
		border-radius: 40rpx 40rpx 0 0;
		margin: -40rpx 0 0 0;

	}

	.my_diamond_photo {
		width: 30rpx;
		height: 30rpx;
		line-height: 50rpx;
	}

	.diamondMall {
		width: 100%;
		height: 400rpx;
		// background-image: linear-gradient(to right, #EDB664, #D9C06C);
		// padding: 40rpx;
		position: relative;
	}

	.diamondMall_bg {
		position: absolute;
		top: 0;
		left: 0;
	}

	.my_diamond {
		width: 100%;
		height: 300rpx;
		background-color: #52483C;
		border-radius: 40rpx 40rpx 0px 0;
		margin: 60rpx 0 0 0;

	}

	.diamondMall_zuan::after {
		content: "";
		width: 5rpx;
		height: 50rpx;
		top: 40rpx;
		left: 150rpx;
		background-color: #5C5954;
		position: absolute;

	}

	.detailBrandside_bottom_bg {
		width: 100%;
		height: 100%;
		position: absolute;
		border: 2rpx solid #DADADA;
		border-radius: 10rpx;
	}

	.detailBrandside_bottom_text {
		width: 100%;
		// height: 350rpx;
		position: relative;
	}

	.detailBrandside_image {
		width: 100%;
		height: 100%;
		border-radius: 24rpx 24rpx 0 0;
	}

	.detailBrandside_bottom {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		padding: 10px;

	}

	.detailBrandside_title {
		color: rgb(241, 158, 126);
		line-height: 480rpx;
		font-size: 44rpx;
	}

	.detailBrandside_text {
		width: 600rpx;
		height: 304rpx;
		letter-spacing: 1rpx;
		text-indent: 1rem;
		margin: -200rpx 0px 0px 80rpx;
	}

	.detailBrandside_top {
		// text-align: center;
		// line-height: 540rpx;
		color: #FFF;
		font-size: 24rpx;
	}

	.detailBrandside {
		width: 340rpx;
		height: 460rpx;
		margin: 0 0px 100rpx 0;

	}

	.detailBrandside_box {
		width: 100%;
		height: 100%;
		border-radius: 24rpx;
	}

	.detailBrandside_box_top {
		width: 100%;
		height: 70%;
		// background-color: antiquewhite;
	}
</style>
